<template>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>-->
          <a class="navbar-brand" :href="bkmm" :download="bkmm">{{userName}} @ {{roomName}}</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <!--<ul class="nav navbar-nav navbar-right">
            <li>
              <button type="button" class="btn btn-danger btn-lg">
                <span class="icon-off"></span>
              </button>
            </li>
          </ul>-->
          <!--<form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="KK码">
          </form>-->
          <ul class="nav navbar-nav navbar-right">
            <li>
              <button type="button" class="btn btn-default btn-lg" @click="openCameraAndSendOffer2All">
                <span :class="cameraVideoStream ? 'icon-eye-close':'icon-eye-open'"></span>
              </button>
                <!--<span class="icon-phone"></span>
                <span class="icon-group"></span>
                <span class="icon-microphone"></span>
                <span class="icon-microphone-off"></span>
                <span class="icon-comments"></span>-->
            </li>
          </ul>
        </div>
      </div>
  </nav>
</template>

<script>
/* eslint-disable */
import { getNavigatorMedia } from '../static/utils'
import { mapActions, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'NavBar',
  data () {
    return {
    }
  },
  methods: {
    ...mapActions({
      doCamera:'CONTROL_LOCAL_CAMERA',
      sendOffer2All: 'OFFER_2_ALL'
    }),
    openCameraAndSendOffer2All(){
      var vm = this;
      vm.doCamera().then((ret)=>{
        if(ret) vm.sendOffer2All();
      });
    }
  },
  computed: {
    ...mapGetters(['backMM','token','roomName','userName','cameraVideoStream']),
    bkmm () {
      return '/rcn/mm/'+this.backMM+'.jpg';
    }
  },
  created () {
    //this.openCameraAndSendOffer2All();
  }
}
</script>